<template>
  <div class="ht-aside">
    <ul class="ht-aside-list">
      <li class="ht-aside-item" v-for="(item, index) in sidemenus" :key="index">
        <router-link :to="item.path || ''">{{ item.name }}</router-link>

        <template v-if="item.children && item.children.length > 0">
          <ul class="ht-aside-down">
            <li class="ht-aside-down-item" v-for="(row, col) in item.children" :key="`${index}_${col}`">
              <router-link :to="row.path">{{ row.name }}</router-link>
            </li>
          </ul>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import menus from '../utils/menus.json';

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      listData: []
    };
  },
  computed: {
    sidemenus() {
      return menus;
    }
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
@import '../styles/utils/_mixin.scss';
.ht-aside {
  @include scrollBar(5px, #f2f2f4, rgb(25, 125, 240));
  overflow: auto;
  border-right: 1px solid #f2f2f4;

  &-list {
  }

  &-item {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
  }

  &-down {
    &-item {
      color: #686868;
      font-size: 14px;

      a {
        display: block;
        padding: 10px 20px 10px 30px;
      }
    }
  }
}
</style>
